<template>
  <div class="about">

    <!-- Hero -->
    <section class="hero">
      <h1>关于中国云咖</h1>
      <p>我们致力于为咖啡爱好者提供最优质的咖啡豆和专业的冲煮体验</p>
    </section>

    <!-- 公司简介 -->
    <section class="story container">
      <h2>我们的故事</h2>
      <div class="story-body">
        <div class="story-text">
          <p>中国云咖成立于2025年，源于一群咖啡爱好者对优质咖啡的不懈追求。我们相信，一杯好咖啡不仅能唤醒清晨的活力，更能为日常生活增添一份仪式感和幸福感。</p>
          <p>云咖臻选中国优质咖啡豆，主打云南、海南、福建和四川产区风味。云南豆以醇厚饱满著称，带有坚果与巧克力香气；海南豆果酸明亮，口感清新柔和；福建豆则兼具花果芬芳与细腻回甘。我们坚持产地直采，经专业烘焙保留地域特色，为咖啡爱好者呈现丰富而地道的中国咖啡体验，让每一杯都传递本土风土的独特魅力。</p>
          <p>除了精选咖啡豆，我们还提供专业的咖啡器具，希望能帮助每一位咖啡爱好者在家也能冲煮出专业水准的咖啡，享受咖啡带来的美好时光。</p>
        </div>
        <div class="story-imgs">
          <img src="../static/_20250902_153214.png" alt="咖啡豆采摘">
          <img src="../static/pinjian.png" alt="咖啡品鉴">
        </div>
      </div>
    </section>

    <!-- 我们的理念 -->
    <section class="philosophy container">
      <h2>我们的理念</h2>
      <div class="philosophy-list">
        <div class="card" v-for="item in philosophy" :key="item.title">
          <i :class="item.icon"></i>
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </section>

    <!-- 团队 -->
    <section class="team container">
      <h2>认识我们的团队</h2>
      <div class="team-list">
        <div class="card" v-for="member in team" :key="member.name">
          <img :src="member.avatar" :alt="member.name">
          <h3>{{ member.name }}</h3>
          <p class="position">{{ member.position }}</p>
          <p class="bio">{{ member.bio }}</p>
        </div>
      </div>
    </section>

    <!-- 产地 -->
    <section class="origins container">
      <h2>我们的咖啡产地</h2>
      <div class="origin-list">
        <div class="origin" v-for="o in origins" :key="o.name">
          <img :src="o.img" :alt="o.name">
          <div class="mask">
            <h3>{{ o.name }}</h3>
            <p>{{ o.tag }}</p>
          </div>
        </div>
      </div>
    </section>

<!--    &lt;!&ndash; 联系我们 &ndash;&gt;-->
<!--    <section class="contact container">-->
<!--      <div class="contact-wrap">-->
<!--        <div class="contact-info">-->
<!--          <h2>联系我们</h2>-->
<!--          <p>如果您对我们的产品有任何疑问或建议，欢迎随时联系我们。</p>-->

<!--          &lt;!&ndash; ① 地址 &ndash;&gt;-->
<!--          <div class="info-item">-->
<!--            <i class="fa fa-map-marker"></i>-->
<!--            <div>-->
<!--              <h3>地址</h3>-->
<!--              <p>北京市朝阳区咖啡路88号 咖啡豆之家总部</p>-->
<!--            </div>-->
<!--          </div>-->

<!--          &lt;!&ndash; ② 电话 &ndash;&gt;-->
<!--          <div class="info-item">-->
<!--            <i class="fa fa-phone"></i>-->
<!--            <div>-->
<!--              <h3>电话</h3>-->
<!--              <p>400-888-9999</p>-->
<!--              <small>周一至周日 9:00-21:00</small>-->
<!--            </div>-->
<!--          </div>-->

<!--          &lt;!&ndash; ③ 邮箱 &ndash;&gt;-->
<!--          <div class="info-item">-->
<!--            <i class="fa fa-envelope"></i>-->
<!--            <div>-->
<!--              <h3>邮箱</h3>-->
<!--              <p>info@coffeebeans.com</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="contact-form">-->
<!--  <h3>发送消息</h3>-->
<!--  <form @submit.prevent="submit">-->
<!--    &lt;!&ndash; 姓名 &ndash;&gt;-->
<!--    <label>姓名</label>-->
<!--    <input v-model="form.name" placeholder="您的姓名" required/>-->

<!--    &lt;!&ndash; 邮箱 &ndash;&gt;-->
<!--    <label>邮箱</label>-->
<!--    <input v-model="form.email" type="email" placeholder="您的邮箱" required/>-->

<!--    &lt;!&ndash; 主题 &ndash;&gt;-->
<!--    <label>主题</label>-->
<!--    <input v-model="form.subject" placeholder="消息主题" required/>-->

<!--    &lt;!&ndash; 内容 &ndash;&gt;-->
<!--    <label>消息内容</label>-->
<!--    <textarea v-model="form.message" rows="5" placeholder="请输入您的消息内容..." required></textarea>-->

<!--    &lt;!&ndash; 发送按钮 &ndash;&gt;-->
<!--    <button type="submit" class="submit-btn">-->
<!--      <i class="fa fa-paper-plane"></i> 发送消息-->
<!--    </button>-->
<!--  </form>-->
<!--</div>-->
<!--      </div>-->
<!--    </section>-->

    <!-- 返回顶部 -->
    <transition name="fade">
      <button class="back-top" v-show="showTop" @click="toTop">
        <i class="fa fa-arrow-up"></i>
      </button>
    </transition>

    <!-- ================= 底部 Footer ================= -->
    <!-- 底部 Footer -->
    <Footer />

  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      mobileMenuOpen: false,
      showTop: false,
      form: { name: '', email: '', subject: '', message: '' },
      philosophy: [
        { icon: 'fa fa-leaf', title: '品质至上', desc: '我们严格把控每一批咖啡豆的品质，从种植、采摘到烘焙，每一个环节都精益求精，只为呈现最纯正的咖啡风味。' },
        { icon: 'fa fa-handshake-o', title: '公平贸易', desc: '我们与咖啡产区的农民直接合作，确保他们获得公平的收入，同时支持可持续的咖啡种植方式，保护生态环境。' },
        { icon: 'fa fa-users', title: '分享热爱', desc: '我们希望将对咖啡的热爱传递给更多人，通过专业的知识分享和优质的产品，让更多人爱上咖啡，享受咖啡。' }
      ],
      team: [
        { name: '栗晓玲', position: '创始人 / 咖啡师', avatar: 'https://picsum.photos/400/500?random=3', bio: '拥有多年咖啡行业经验，对咖啡豆有着极致的追求。' },
        { name: '赵健芳', position: '采购总监', avatar: 'https://picsum.photos/400/500?random=4', bio: '常年深入云南、海南、福建等国内核心产区，直接与庄园合作，确保每一批豆子都可溯源、品质稳定。' },
        { name: '韩佳瑶', position: '客户体验主管', avatar: 'https://picsum.photos/400/500?random=5', bio: '致力于搭建会员社群与服务体系，从订单咨询到售后支持，为每一位客人提供温暖专业的咖啡体验。' },
        { name: '申尚川', position: '品牌系统开发工程师', avatar: 'https://picsum.photos/400/500?random=6', bio: '专注咖啡品牌数字化与系统构建，负责技术架构设计及线上平台研发，以创新工具提升用户体验与运营效能，助力中国咖啡品牌高效成长。' }
      ],
      origins: [
        { name: '云南', tag: '咖啡的原生沃土', img: 'https://picsum.photos/id/431/400/400', link: '#' },
        { name: '海南', tag: '清新的热带风味', img: 'https://picsum.photos/id/766/400/400', link: '#' },
        { name: '四川', tag: '山地产区的惊喜', img: 'https://picsum.photos/id/493/400/400', link: '#' },
        { name: '福建', tag: '醇厚中见层次', img: 'https://picsum.photos/id/225/400/400', link: '#' }
      ],
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    },
    handleScroll() {
      this.showTop = window.scrollY > 300
    },
    toTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    submit() {
      alert('感谢您的留言，我们会尽快回复您！')
      this.form = { name: '', email: '', subject: '', message: '' }
    }
  }
}
</script>

<style scoped>
/* 全局变量/通用 */
:root {
  --primary: #8B5A2B;
  --secondary: #D2B48C;
  --accent: #CD853F;
  --light: #F5F5DC;
  --dark: #3E2723;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
h2 {
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin-bottom: 32px;
  text-align: center;
}
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.1);
}

/* 顶部通知 */
.topbar {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 14px;
}
.topbar a {
  text-decoration: underline;
  margin-left: 4px;
}

/* Hero */
.hero {
  height: 500px;
  background: url('https://picsum.photos/1600/900?random=11') center/cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 12px;
  z-index: 1;
}
.hero p {
  font-size: 24px;
  max-width: 700px;
  text-align: center;
  z-index: 1;
}

/* 故事 */
.story-body {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.story-text p {
  margin-bottom: 16px;
  line-height: 1.7;
  color: #333;
}
.story-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.story-imgs img {
  width: 100%;
  border-radius: var(--radius);
  height: 260px;
  object-fit: cover;
}
.story-imgs img:last-child {
  margin-top: 40px;
}

/* 理念 */
.philosophy-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.philosophy-list .card {
  padding: 32px;
  text-align: center;
}
.philosophy-list i {
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 16px;
}
.philosophy-list h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 团队 */
.team-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.team-list .card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.team-list .card {
  overflow: hidden;
}
.team-list .card > div {
  padding: 20px;
}
.position {
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 8px;
}
.bio {
  font-size: 14px;
  color: #555;
}

/* 产地 */
.origin-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .origin-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.origin {
  position: relative;
  height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
}
.origin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}
.origin:hover img {
  transform: scale(1.1);
}
.mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: #fff;
}
.mask h3 {
  font-weight: 600;
}
.mask p {
  font-size: 14px;
  opacity: .8;
}

/* 联系 */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.contact-info,
.contact-form {
  padding: 40px;
}
.contact-info {
  border-right: 1px solid #eee;
}
.info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.info-item i {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.social a {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s;
}
.social a:hover {
  background: var(--dark);
}

/* 表单 */
.contact-form {
  background: #fafafa;
}
.contact-form h3 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
input,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: border .3s, box-shadow .3s;
}
input:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,90,43,.2);
  outline: none;
}
button[type="submit"] {
  width: 100%;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  padding: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button[type="submit"]:hover {
  background: var(--dark);
}

/* 返回顶部 */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 999;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式 */
@media (max-width: 900px) {
  .story-body,
  .contact-wrap {
    grid-template-columns: 1fr;
  }
  .contact-info {
    border-right: none;
    border-bottom: 1px solid #eee;
  }
}
@media (max-width: 600px) {
  .hero h1 {
    font-size: 36px;
  }
  .hero p {
    font-size: 18px;
  }
}
  /* ====== 顶部导航样式 ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.notify-bar {
  background: #8B5A2B;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 6px 0;
}
.notify-bar a {
  text-decoration: underline;
  margin-left: 4px;
}
.main-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #8B5A2B;
}
.search-box {
  position: relative;
  flex: 1;
  max-width: 320px;
  margin: 0 24px;
}
.search-box input {
  width: 100%;
  padding: 8px 36px 8px 16px;
  border-radius: 20px;
  border: 1px solid #ccc;
}
.search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}
.icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.icon-btn {
  position: relative;
  font-size: 20px;
  color: #333;
}
.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #4ade80;
  color: #fff;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
}
.desktop-menu {
  display: flex;
  gap: 32px;
  justify-content: center;
  background: #8B5A2B;
  padding: 10px 0;
}
.desktop-menu a {
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  transition: background .3s;
}
.desktop-menu a.active,
.desktop-menu a:hover {
  background: #3E2723;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
}
.mobile-menu a {
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  color: #333;
}
.slide-enter-active,
.slide-leave-active {
  transition: max-height .3s ease;
  max-height: 300px;
  overflow: hidden;
}
.slide-enter-from,
.slide-leave-to {
  max-height: 0;
}

@media (max-width: 768px) {
  .search-box,
  .desktop-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .mobile-menu {
    display: flex;
  }
}
  /* ===== 底部 Footer ===== */
.site-footer {
  margin-top: 80px;
  background: #3E2723;
  color: #fff;
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-brand i {
  color: #D2B48C;
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s;
}
.footer-social a:hover {
  background: rgba(255,255,255,.2);
}
.footer-col h4 {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ccc;
}
.footer-col li a {
  color: #ccc;
  text-decoration: none;
}
.footer-col li a:hover {
  color: #fff;
}
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 14px;
  color: #aaa;
}
  /* ===== Footer 样式 ===== */
.site-footer {
  margin-top: 80px;
  background: #3E2723;
  color: #fff;
  padding: 48px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-brand i {
  color: #D2B48C;
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s;
}
.footer-social a:hover {
  background: rgba(255,255,255,.2);
}
.footer-col h4 {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ccc;
}
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 14px;
  color: #aaa;
}

/* 发送按钮样式 */
.submit-btn {
  width: 100%;
  background: #8B5A2B;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.submit-btn:hover {
  background: #3E2723;
}
  /* 强制返回顶部可见 */
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background: #8B5A2B !important;
  color: #fff !important;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  z-index: 9999;
  opacity: 0.9;
}
.footer-social a {
  background: #8B5A2B !important;   /* 咖色背景 */
  color: #fff !important;           /* 白色图标 */
}
.footer-social a:hover {
  background: #3E2723 !important;   /* 悬停更深 */
}

/* 发送消息按钮颜色修复 */
.submit-btn {
  background: #8B5A2B !important;
  color: #fff !important;
}
.submit-btn:hover {
  background: #3E2723 !important;
}
  .contact-form label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
  color: #333;
}
  /* 强制显示图标 */
.info-item i.fa {
  font-family: "FontAwesome" !important;
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
  width: 40px;
  height: 40px;
  background: #8B5A2B;
  color: #fff;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
}
</style>